<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式文件 -->
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="js/jquery-1.12.4.min.js"></script>

    <title>Tranplate1</title>
    <style>
        body{
            background-image: linear-gradient(to right top, #aa00ff, #00ff7f);
            align-items: center;
            justify-content: center;
            display: flex;


        }
        .main{
            background-color: rgba(255, 255, 255, 0.4);
            position: relative;
            width: 60%;
            height: 400px;
            box-shadow: 0 5px 15px rgba(20, 20, 20, 0.8);
            /* display: flex; */
            border-radius: 50px;
            align-items: center;
            margin-top: 30%;
            backdrop-filter: blur(50px);
        }
    </style>
</head>
<body>
<div class="main" id="main">
    <div id="zh" style=" margin-top: 40%; align-items: center;">
        <van-form @submit="onSubmit1"  action="addNewTie">
            <van-cell-group inset>
                <van-field
                        v-model="username1"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                ></van-field>
                <van-field
                        v-model="password1"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                ></van-field>
            </van-cell-group>

            <div id="" style=" margin-top: 20px; text-align: center; ">
<!--                <van-button color="linear-gradient(to right, #ff17f4, #120bee)" round >-->
                   <div @click="login1">登录</div>
<!--                </van-button>-->
                <van-button color="linear-gradient(to right, #ff17f4, #120bee)" round >
                    注册
                </van-button>
            </div>

        </van-form>
    </div>

</div>
<script>
    // 在 #main 标签下渲染一个按钮组件
    new Vue({
        el: '#main',
        data: {
            username1:'123456',
            password1:'000000',
            onSubmit1:''

        },
        methods: {
           login1(){

               $.ajax({
                   url:'api/login.do',
                   type: 'get',
                   dataType:'json',

                   data:{
                       name1 :this.username1,
                       pwd1 : this.password1
                   },
                   success:function (res){
                     localStorage.setItem("token", res.data);
                       alert(res.data)
                       location.href='index.html';


                   }
               })
           }
        }
    });
</script>
</body>
</html>
